<template>
  <div style="padding:30px;background-color:#f0f2f5;">
    <el-card class="box-card" shadow="nerve">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input v-model="form.orderSn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单类型" size="small">
              <el-select v-model="form.orderType " placeholder="请选择">
                <el-option v-for=" item in orderType" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付方式" size="small">
              <el-select v-model="form.payType" placeholder="请选择">
                <el-option v-for="item in payType" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态" size="small">
              <el-select v-model="form.status " placeholder="请选择">
                <el-option v-for="item in status" :label="item.name" :key="item.id" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="18">
            <el-form-item style="margin-top:30px">
              <el-button type="primary" @click="search(0)">搜索</el-button>
              <el-button @click="search(1)">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table :data="orderList" border style="width: 100%" v-loading="loading">
        <el-table-column fixed label="#" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="orderSn" label="订单编号" width="240" align="center">
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" width="160" align="center">
          <template slot-scope="scope">
            <div v-show="scope.row.payType==0" style=" border-radius: 5px; margin:0 auto; font-size:12px; background-color: #f4f4f5;
  background-color: #909399;
    border-color: #909399;
    color: #fff; width:60px;line-height:30px;text-alert:center;">
              未支付</div>
            <div v-show="scope.row.payType==1" style="margin:0 auto; width:50px;height:40px"><img
                style="width:50px;height:40px"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd-image.i4.cn%2Fimage%2Ficon%2F2020%2F03%2F26%2F14%2F333206289%2Fz1585204561832_963622.jpg&refer=http%3A%2F%2Fd-image.i4.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618128460&t=251c88f267fae8671a6ee239c17aa6ee"
                alt=""></div>
            <div v-show="scope.row.payType==2" style="margin:0 auto; width:50px;height:40px"><img
                style="width:50px;height:40px"
                src=""
                alt=""></div>

          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="160" align="center">
          <template slot-scope="scope">
            <div class="t"
              :class="scope.row.status==0?'t0':scope.row.status==1?'t1':scope.row.status==2?'t2':scope.row.status==3?'t3':scope.row.status==4?'t4':'t5'">
              {{scope.row.status==0?'待付款':scope.row.status==1?'代发货':scope.row.status==2?'已发货':scope.row.status==3?'已完成':scope.row.status==4?'已关闭':'无效订单'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" width="240" align="center">
        </el-table-column>
        <el-table-column prop="memberUsername" label="用户账号" width="200" align="center">
        </el-table-column>
        <el-table-column label="订单类型" width="200" align="center">
          <template slot-scope="scope">
            <div class="c" :class="scope.row.orderType==null?'a':'b'">{{scope.row.orderType==0?"正常订单":"秒杀订单"}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="备注" width="200" align="center">

        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="orderInfo(scope.row)">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

    </el-card>

    <div style="height:30px;width:10px"></div>

  </div>
</template>

<script>
  import mixins from '@/mixins/index'
  import order from '@/api/order/index'
  //搜索列表渲染数据

  export default {
    mixins: [mixins],
    data() {
      return {
        form: {},

        orderList: [],
        currentPage4: 1
      }
    },

    methods: {
      //------------------------------------------------------------------------------------获取列表数据
      getOrderTable() {
        this.loading=true
        order.findOrdersByPage(this.page, this.num, this.form).then(res => {
          this.orderList = res.data.rows
          this.total = res.data.total
          this.loading=false

        })
      },
      //-----------------------------------------------------------------------------------搜索
      search(res) {
        if (res == 0) {

        } else {
          this.form = {}
          console.log('重置')
        }
        this.getOrderTable()
      },
      //---------------------------------------------------------------------------查看订单详情
      orderInfo(res) {
        this.$router.push({
          name:"orderInfo",
          query:{
            id:res.id
          }
        })
        console.log(res)
      },
      //----------------------------------------------------分页
      handleSizeChange(val) {
        this.num = val
        this.getOrderTable()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getOrderTable()

      }
    },

    created() {
      this.getOrderTable()

    }

  }

</script>

<style>
@import './index.css'

</style>
